<template>
	<view class="tree flexR">
		<view class="tree-left">
			<!-- <view class="tree-left-item flexR history" @click="handleTree('history')" :class="historyActive?'active':''">
				<view class="tree-left-item-left"></view>
				<view class="history-right">
					<u-icon name="clock" color="#ffad37" size="34"></u-icon>
					<text>历史挂号</text>
				</view>
			</view> -->
			<view class="tree-left-item flexR" v-for="(item, i) in dataList" :key='i' @click="handleTree(item)" :class="item.active?'active':''">
				<view class="tree-left-item-left"></view>
				<text>{{item.deptName}}</text>
			</view>
		</view>
		<view class="tree-right">
			<view class="sub-list-depart" v-show="!historyActive">
				<view v-for="(item,index) in subList" :key="index" class="sub-list-depart-item flexR u-border-bottom" @click="toPage(item,'depart')">
					<text>{{item.deptName}}</text>
					<u-icon name="arrow-right" color="#A5A5A5" size="36"></u-icon>
				</view>
			</view>
			<view class="sub-list-history" v-show="historyActive">
				<view v-for="(item,index) in subHisList" :key="index" class="sub-list-history-item flexR u-border-bottom">
					<image class="sub-list-history-left" src="../../static/images/swiper/3.jpg" mode=""></image>
					<view class="sub-list-history-right">
						<view class="title">
							<text>{{item.name}}</text>
							<text style="font-size: 24rpx;">{{item.jobTitle}}</text>
						</view>
						<view class="row">
							<text>科室：</text>{{item.deptName}}
						</view>
						<view class="row sc">
							<text>擅长：</text>{{item.expertise}}
						</view>
						<view class="his-info flexR">
							<view class="his-info-money">
								<text v-if="item.money">￥</text>
								<text v-if="item.money">{{item.money.substr(0,item.money.length-3)}}</text>
								<text style="font-size: 22rpx; color: #f00;" v-if="item.money">{{item.money.substr(item.money.length-3)}}</text>
								<text>{{item.timeRange}}</text>
							</view>
							<view class="his-info-btn" @click="toPage(item,'history')">
								预约
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Load :load="loading"/>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Load from '@/components/Load/index.vue'
	import { getHisRegister } from '@/api/register.js'
	export default {
		components:{ Load },
		props:{
			data:{
				type:Array,
				default:() => {
					return []
				}
			},
			active:{
				type:String,
				default:'depart'
			}
		},
		watch:{
			data:{
				handler:function (val) {
						this.dataList = JSON.parse(JSON.stringify(val))
						this.subHisList = []
						this.subList = []
						this.historyActive = false
						this.handleTree(this.active)
				},
				immediate:true
			}
		},
		data() {
			return {
				dataList:[], // 所有科室信息
				historyActive:false,
				subList:[], // 右边的科室信息
				subHisList:[], // 右边历史挂号
				loading:false
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		methods: {
			handleTree(val){
				this.subList = [];
				if(val==='history'){
					this.dataList.forEach(item => {
						if (item.active){
							this.$set(item,'active', false)
						}
					})
					this.historyActive = true
					if(!this.subHisList.length){
						this.getHistory();
					}
				}else {
					this.historyActive = false;
					// debugger
					if(val==='depart'){
						this.dataList.forEach((item, i) => {
							if (i===0){
								this.$set(item,'active', true)
								this.subList = item.children||[];
							}else{
								this.$set(item,'active', false)
							}
						})
					}else{
						this.dataList.forEach(item => {
							let flag  = false
							if(item.deptCode === val.deptCode){
								flag = true
								this.subList = item.children||[];
							}
							this.$set(item,'active', flag)
						})
					}
				}
			},
			getHistory(){
				this.loading = true
				getHisRegister({patientId:this.userInfo.patid}).then(data => {
					this.loading = false
					this.subHisList = data || []
				}).catch(e => {
					this.loading = false
					this.subHisList = []
				})
			},
			toPage(item,type){
				if(type === 'history'){
					// uni.navigateTo({
					// 	url:'/pages/Personal/MyDoctor/Index'
					// })
					uni.navigateTo({
						url:'/pages/registerPblist/index?doctorCode='+item.code
					})
				}else{
					uni.navigateTo({
						url:'/pages/registerPblist/index?deptCode='+item.deptCode
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree{
		.tree-left{
			width: 200rpx;
			.tree-left-item{
				min-height: 86rpx;
				background-color: #e3f6f6;
				border-bottom: 1px solid #caeded;
				justify-content: flex-start;
				align-items: center;
				color: $text-color;
				.tree-left-item-left{
					background-color: rgba($color: #000000, $alpha: 0);
					height: 22rpx;
					width: 6rpx;
					margin-right: 25rpx;
					border-radius: 5rpx;
				}
			}
			.tree-left-item:last-child{
				border: none;
			}
			.history{
				background-color: #FFF8E6;
				border-bottom:none;
				.tree-left-item-left{
					margin-right: 10rpx;
				}
				.history-right{
					text{
						margin-left: 10rpx;
					}
				}
			}
			.active{
				background-color: #FFFFFF;
				.tree-left-item-left{
					background-color: $theme-color;
				}
			}
		}
		.tree-right{
			flex: 1;
			.sub-list-depart-item{
				margin: 0 30rpx;
				min-height: 86rpx;
				justify-content: space-between;
				align-items: center;
			}
			.sub-list-history{
				width: 100%;
				overflow: hidden;
				.sub-list-history-item{
					margin: 0 30rpx;
					padding: 30rpx 0;
					>image{
						width: 147rpx;
						height: 165rpx;
						border-radius: 6rpx;
					}
					>.sub-list-history-right{
						flex: 1;
						color: $text-color;
						margin-left: 20rpx;
						.title{
							font-size: 32rpx;
							margin-bottom: 10rpx;
							>text:first-child{
								margin-right: 14rpx;
							}
						}
						.row{
							font-size: 24rpx;
							margin-top: 6rpx;
							>text{
								font-weight: bold;
							}
						}
						.sc{
							line-height: 30rpx;
							height: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; // 作为弹性伸缩盒子模型显示。
							-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
							-webkit-line-clamp: 1; // 显示的行
						}
						.his-info{
							height: 30rpx;
							font-size: 30rpx;
							margin-top: 10rpx;
							justify-content: space-between;
							align-items: center;
							color: #f00;
							.his-info-money>text:first-child{
								font-size: 24rpx;
								margin-right: 6rpx;
							}
							.his-info-money>text:last-child{
								color: $text-color;
								font-size: 24rpx;
								margin-left: 6rpx;
							}
							.his-info-btn{
								color: $text-color;
								border: 1px solid $text-color-card-title;
								padding: 4rpx 20rpx;
								border-radius: 6rpx;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
